<template>
  <div class="divInput">
        <div class="input" @click="openValue" :style="inputStyle">
          <input v-model="selectLabel" type="text" placeholder="Please Select" disabled>
          <div class="icon">
            <i class="el-icon-arrow-up" v-if="show"></i>
            <i class="el-icon-arrow-down" v-else></i>
          </div>
        </div>
        <div class="list" v-show="show">
          <ul>
            <li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.value" :class="[selectValue==item.value?'active':'']">{{ item.label }}</li>
          </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LeSelect',
    props: {
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      },
      value: {
        type: [String, Number],
        default: ""
      },
      inputStyle: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data(){
      return{
        show:false,
        selectValue:'',
        selectLabel: ""
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(val) {
          const valueItem = this.tableData.find((item) => item.value == val);
          if(valueItem){
            this.selectValue = valueItem.value;
            this.selectLabel = valueItem.label;
          }
        }
      }
    },
    methods: {
      openValue(){
        this.show=!this.show;
      },
      getvalue(index,item){
        this.selectLabel = item.label;
        this.selectValue=item.value;
        this.$emit("input", item.value);
        this.$emit('select', item);
        this.show=false;
      },
    }
}
</script>

<style lang="scss" scoped>
.divInput{
}
ul li{
    list-style: none;
}
.input{
    padding-left: 10px;
    border: none;
    position: relative;
    height: 100%;
    line-height: 100%;
    display: flex;

    .icon{
      line-height: 100%;
      padding-top: 13%;
      margin-right: 13px;
      font-weight: bold;
    }
}
.input input{
    border: none;
    outline: none;
    width: 100%;
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    text-align: center;

    &:disabled{
      background: transparent;
    }
}
.input img{
    position: absolute;
    right: 34px;
    top: 48%;
}
.list{
    // border: 1px solid #E3E3E3;
    overflow: hidden;
    margin-top: 2px;
}
.list ul{
  padding: 0;
  margin: 0;

  .active{
    background-color: #CFEBFF;
  }
}
.list ul li{
    width: calc(100% + 2px);
    cursor: pointer;
    background: #FFFFFF;
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    padding: 14px 0 13px 0;
    -moz-user-select:none; /* Firefox私有属性 */-webkit-user-select:none; /* WebKit内核私有属性 */-ms-user-select:none; /* IE私有属性(IE10及以后) */-khtml-user-select:none; /* KHTML内核私有属性 */-o-user-select:none; /* Opera私有属性 */
    user-select:none; /* CSS3属性 */
}
.list ul li:hover{
    background-color: #CFEBFF;
}
</style>